<template>
	<view>
		<view class="topTab" v-if="formData.feedbackList[0] && formData.feedbackList[0].id">
			<view class="detailTab" :class="tabIndex === 'detail' ? 'active' : ''" @click="tabIndex = 'detail'">任务</view>
			<view class="applyTab" :class="tabIndex === 'apply' ? 'active' : ''" @click="tabIndex = 'apply'">反馈</view>
		</view>
		<view v-show="tabIndex == 'detail'">
			<uni-card >
				<uni-section title="维修申请信息" type="line">
					<uni-forms ref="form" :modelValue="formData" label-width="100px">
						<uni-forms-item label="维修单编号" required name="applyCode">
							<view>{{ formData.applyCode }}</view>
						</uni-forms-item>
						<uni-forms-item label="设备" required name="equipId">
							<view>{{ formData.equipment.equipName }}</view>
						</uni-forms-item>
						<uni-forms-item label="申请内容">
							<view>{{ formData.applyContent }}</view>
						</uni-forms-item>
						<uni-forms-item label="图片">
							<view v-if="formData.fileList.length"
								style="display: flex;flex-direction: row;align-items: center;">
								<view @click="openPic(formData.fileList[0].url)" style="width: 100%;height: 40px;">
									<image mode="aspectFit" :src="formData.fileList[0].url" style="width: 100%;height: 40px;"></image>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</uni-card>
		</view>
		<view v-show="tabIndex == 'apply'" v-if="formData.feedbackList[0] && formData.feedbackList[0].id">
			<uni-card v-for="(item, index) in formData.feedbackList" :key="index">
				<uni-section title="维修反馈" type="line">
					<uni-forms ref="apply" label-width="100px">
						<uni-forms-item label="维修状态" required name="repairStatus">
							<view v-if="item.repairStatus == 0">
								未维修<uni-icons type="closeempty" size="20" color="#f56c6c"></uni-icons>
							</view>
							<view v-if="item.repairStatus == 1">
								已维修<uni-icons type="checkmarkempty" size="20" color="#b5e271"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="维修内容" required name="repairContent">
							<view>{{ item.repairContent }}</view>
						</uni-forms-item>
						<uni-forms-item label="回复时间">
							<view>{{ item.createTime }}</view>
						</uni-forms-item>
						<uni-forms-item label="图片">
							<view v-if="item.fileList.length"
								style="display: flex;flex-direction: row;align-items: center;">
								<view @click="openPic(item.fileList[0].url)" style="width: 100%;height: 40px;">
									<image mode="aspectFit" :src="item.fileList[0].url" style="width: 100%;height: 40px;"></image>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-section>
			</uni-card>
		</view>
		<uni-popup ref="IMAGE" v-show="picUrl">
			<view>
				<image :src="picUrl"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { apply, getById } from '@/common/api/repair'
	export default {
		data() {
			return {
				// 表单参数
				formData: {
					applyCode: '',
					equipId: null,
					applyContent: ''
				},
				applyForm: {
					repairStatus: 1,
					repairContent: ''
				},
				loading: false,
				statusList: [{"value": 0,"text": "未维修"},{"value": 1,"text": "已维修"}],
				id: null,
				tabIndex: 'detail',
				picUrl: '',
			}
		},
		components: {
		},
		onLoad(option) {
			this.id = option.id
			getById(option.id).then(res => {
				console.log(res, 'response')
				this.formData = res.data
			})
		},
		methods: {
			submit() {
				this.applyForm.applyId = this.id
				apply(this.applyForm).then(res => {
					console.log(res, 'review')
					if(res.respCode === '0000') {
						uni.showToast({
						  title: '反馈成功',
						  duration: 2000
						});
						uni.navigateBack()
					}
				})
			},
			findText(id, list) {
				if(id === true) id =1
				if(id === false) id =1
				const theItem = list.find(item => item.value === id);
				return theItem ? theItem.text : '未知';
			},
			openPic(picUrl) {
				this.picUrl = picUrl
				this.$refs.IMAGE.open()
			},
		}
	}
</script>

<style lang="less">
	.uni-forms-item view {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.topTab {
		margin: 15px;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
		display: flex;
		view {
			width: 100%;
			text-align: center;
			height: 5vh;
			line-height: 5vh;
		}
		view.active {
			background-color: #007AFF;
			color: #fff;
		}
	}
	button {
		margin: 15px;
	}
</style>